<template>
  <div class="bottom-right">
    <div class="chart-title">最新借款动态</div>
    <div class="loan-table">
      <div class="loan-table-head row">
        <span class="name">姓名</span>
        <span class="age">年龄</span>
        <span class="province">省份</span>
        <span class="time">时间</span>
        <span class="status">状态</span>
        <span class="amount">金额</span>
      </div>
      <div class="loan-table-body">
        <template v-if="data.length > 0">
          <vueSeamlessScroll
            :data="data"
            :class-option="myOption"
            class="loan-table-body"
          >
            <div class="row" v-for="(item, index) in data" :key="index">
              <span class="name">{{ item.name }}</span>
              <span class="age">{{ item.age }}</span>
              <span class="province">{{ item.province.substr(0, 2) }}</span>
              <span class="time">{{ item.time }}</span>
              <div class="status">
                <span
                  :class="[
                    'status-circle',
                    item.type === 'loan' ? 'loan-circle' : 'credit-circle'
                  ]"
                ></span>
                <span
                  :class="[item.type === 'loan' ? 'loan-word' : 'credit-word']"
                  >{{ item.content }}</span
                >
              </div>
              <template v-if="(item.amount + '').length > 6">
                <span class="amount"
                  >{{ Math.ceil(item.amount / 1000000).toFixed(2) }}万</span
                >
              </template>
              <template v-else>
                <span class="amount">{{ Math.ceil(item.amount / 100) }}元</span>
              </template>
            </div>
          </vueSeamlessScroll>
        </template>
        <template v-else>
          <div class="empty-row">暂无数据</div>
        </template>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 具体用法查看官方API:https://github.com/kaorun343/vue-property-decorator
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import vueSeamlessScroll from 'vue-seamless-scroll'
@Component({
  name: 'bottom-right',
  components: {
    //引用的组件在这里声明
    vueSeamlessScroll
  }
})
export default class extends Vue {
  @Prop({ default: [] }) private data!: any[]
  // @Prop({ required: true }) private propExp2?: boolean
  private dataExp: any = ''
  private myOption = {
    step: 0.5
  }
  get computedExp() {
    //computed 属性
    return true
  }
  created() {
    // 最早可以调用vue组件method的钩子
  }
  mounted() {
    //mounted 钩子
  }
  private methodExp() {
    // method创建地方
  }
}
</script>

<style lang="scss" scoped>
.bottom-right {
  width: 4.08em;
  height: 5.31em;
  background: url('./../../../../assets/dashboard/bottom-chart.png') no-repeat
    center;
  background-size: cover;
  border-radius: 0.14em;
  &:hover {
    cursor: pointer;
    animation-name: glow;
    animation-duration: 1s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: ease-in-out;
  }
  .chart-title {
    font-size: 0.2em;
    height: 3em;
    color: #2fd5ff;
    font-family: FZHei-B01S;
    font-weight: 400;
    line-height: 2em;
    letter-spacing: 0.1em;
    text-align: center;
  }
  .loan-table {
    .loan-table-head {
      background-color: #0e1839;
      height: 2.14em;
      color: #fff;
      margin-top: 0 !important;
    }
    .loan-table-body {
      height: 4.1em;
      overflow: hidden;
      .empty-row {
        width: 100%;
        height: 100%;
        text-align: center;
        color: #ccc;
        font-size: 0.14em;
        margin-top: 2em;
      }
    }
    .row {
      font-size: 0.14em;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      margin-top: 1.43em;
      color: #fff;
      margin: 1.43em 0.3em 0;
      .name {
        margin-left: 1.5em;
        width: 2.5em;
      }
      .age {
        margin-left: 1.1em;
        width: 2.5em;
      }
      .province {
        margin-left: 1em;
        width: 2.5em;
      }
      .time {
        margin-left: 1.14em;
        width: 3.14em;
      }
      .status {
        margin-left: 1.14em;
        width: 5.71em;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        .status-circle {
          width: 0.3em;
          height: 0.3em;
          border-radius: 50%;
          margin-right: 0.3em;
          margin-left: -0.3em;
        }
        .loan-circle {
          background-color: #1fc3b3;
          box-shadow: 0 0 0.3em #1fc3b3;
        }
        .credit-circle {
          background-color: #1890ff;
          box-shadow: 0 0 0.3em #1890ff;
        }
        .loan-word {
          color: #1fc3b3;
        }
        .credit-word {
          color: #1890ff;
        }
      }
      .amount {
      }
    }
  }
}
</style>
